<script>
import ToolBar from '@/components/ToolBar'
import DocumentDesigner from '@/components/DocumentDesigner'

export default {
  components: {
    DocumentDesigner,
    ToolBar,
  },
  data() {
    return {
      currentTab: 0,
      deviceList: [
        { key: '07:00', value: '12' },
        { key: '07:15', value: '16' },
        { key: '07:20', value: '15' },
        { key: '07:22', value: '8' },
        { key: '07:24', value: '2' },
        { key: '07:35', value: '4' }
      ]
    }
  },
  mounted() {

  },
  methods: {
    handleChangeCurrentTab(e) {
      this.currentTab = e
    }
  }
}
</script>

<template>
  <div ref="refContainer" class="design-container">
    <document-designer />
  </div>
</template>

<style lang="scss">
.design-container {
  height: 100%;
  position: relative;

  .dialog {
    background-color: #f0f0f0;
    position: fixed;
    right: 24px;
    top: 24px;
    height: 562px;
    border-radius: 12px;
    z-index: 100;
    border: 1px solid #d1d1d1;
    overflow-y: auto;

    .student-socket {
      width: 320px;
      height: 320px;
      border-radius: 12px;
      border: 1px solid #d4d4d4;

      .student-socket-header {
        height: 48px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #d4d4d4;
        padding: 0 12px;
      }

      .student-socket-body {
        height: calc(100% - 48px);
        padding: 12px;
        overflow-y: auto;
      }
    }
  }

  .menu-tabs {
    height: 30px;
    display: flex;
    align-items: center;
    padding-top: 6px;

    &::before {
      content: '';
      display: block;
      width: 12px;
      height: 100%;
      border-bottom: 1px solid #d1d1d1;
    }

    &::after {
      content: '';
      display: block;
      width: calc(100% - 12px - 64px * 2);
      height: 100%;
      border-bottom: 1px solid #d1d1d1;
    }

    .menu-tab {
      width: 64px;
      height: 100%;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-bottom: 1px solid #d1d1d1;
      cursor: pointer;
      user-select: none;

      &.active {
        color: #23a1fa;
        border: 1px solid #d1d1d1;
        border-bottom: none;
      }
    }
  }

  .design-component {
    width: 100%;
  }
}
</style>
